<template>
  <div class="nav-index">
    <navigation :items="navItems" :selectedItem="selectedItem" @item-selected="handleItemSelected"/>
  </div>
</template>

<script>


import Navigation from "@/components/content/navigation/Navigation.vue";

export default {
  name: 'NavigationIndex',
  components: {
    Navigation,
  },
  data() {
    return {
      navItems: [
        {
          label: '家庭',
          image_activate: require('@/assets/icon/index/home.png'),
          image: require('@/assets/icon/index/home.png')
        },
        {
          label: '喜剧',
          image_activate: require('@/assets/icon/index/xiju.png'),
          image: require('@/assets/icon/index/xiju.png'),
        },
        {
          label: '城市',
          image_activate: require('@/assets/icon/index/city.png'),
          image: require('@/assets/icon/index/city.png'),
        },
        {
          label: '古装',
          image_activate: require('@/assets/icon/index/guzhuang.png'),
          image: require('@/assets/icon/index/guzhuang.png'),
        },
        {
          label: '全部',
          image_activate:require('@/assets/icon/index/all.png'),
          image: require('@/assets/icon/index/all.png'),
        },
      ],
      selectedItem: 0,
    };
  },
  methods: {
    handleItemSelected(index) {
      console.log(index)
      this.$router.push({name:'searchall',path:'/searchall'})
    },
  },
};
</script>

<style scoped lang="scss">
.nav-index{
  margin-top: -80px;
  z-index: 10000;
}
</style>

